<template>
    <view class="container" :style="themeColor">
        <view class="order-item-box">
            <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
            <view v-else>
                <view class="order-submit-list">
                    <view class="order-item">
                        <view class="order-submit-item" v-for="(item, index) in listData" :key="index" :item="item">
                            <view v-if="item.BuyOrdSn" class="order-num">
                                <text>单号：{{ item.BuyOrdSn }}</text>
                            </view>
                            <view class="item-top">
                                <image
                                    v-if="!getAppSet().isHideImg"
                                    class="product-img"
                                    :src="
                                        item.ProductImage ? easyGetImgUrl(item.ProductImage) : '/static/img/no-img.jpg'
                                    "
                                    mode="aspectFill"></image>
                                <view class="product-info">
                                    <text class="product-name">{{ item.ProductName }}</text>
                                </view>
                            </view>
                            <block v-for="subitem in item.SubItems">
                                <view class="item-center">
                                    <view class="pro-item">
                                        <view class="left">
                                            <text class="label" v-if="subitem.Attribute"
                                                ><text class="specification">{{
                                                    subitem.Attribute ? subitem.Attribute : "默认规格"
                                                }}</text></text
                                            >
                                            <text class="label">
                                                <text class="price-bold">￥{{ subitem.Price }}</text>
                                                <text class="value product-num"
                                                    >x{{ subitem.Number
                                                    }}{{
                                                        subitem.UnitName ? subitem.UnitName : subitem.DefaultUnit
                                                    }}</text
                                                >
                                            </text>
                                        </view>
                                        <view class="right">
                                            <text class="value price-text"
                                                >小计：￥{{ (subitem.Number * subitem.Price).toFixed(2) }}</text
                                            >
                                        </view>
                                    </view>
                                </view>
                                <view class="remarkmenu" v-if="subitem.Remark || subitem.CustomForm">
                                    <view>备注/表单</view>
                                    <view>
                                        <text v-if="subitem.Remark || subitem.CustomForm">已填写</text>
                                        <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                                    </view>
                                </view>
                                <view class="checkMsg" v-if="subitem.Status == 2 && subitem.CheckMsg">
                                    <text>驳回原因：{{ subitem.CheckMsg }}</text>
                                </view>
                            </block>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { GetRefundOrderDetail } from "@/service/api/exChange.js"
export default {
    components: {},
    data() {
        return {
            id: 0,
            data: {},
            otherData: {},
            listData: {},
            isLoading: false,
        }
    },
    onLoad(e) {
        this.id = e.id
        if (e.type && e.data) {
            uni.setNavigationBarTitle({
                title: e.type == 1 ? "退货商品" : "驳回商品",
            })
            this.data = JSON.parse(decodeURIComponent(e.data))
            this._dataformat(this.data)
        } else {
            this.getDetail()
        }
    },
    methods: {
        getDetail() {
            let param = {
                id: this.id,
            }
            this.isLoading = true
            GetRefundOrderDetail(param).then((res) => {
                this.data = res.Data
                this.otherData = res.OtherData
                this._dataformat(res.Data)
                this.isLoading = false
            })
        },
        _dataformat(data) {
            let items = []
            data.forEach((e) => {
                let filterItem = items.filter((item) => {
                    return item.ProductId == e.ProductId
                })
                if (filterItem.length < 1) {
                    let SubItems = []
                    SubItems.push(e)
                    let obj = {
                        ProductId: e.ProductId,
                        ProductName: e.ProductName,
                        ProductImage: e.ProductImage,
                        Attribute: e.Attribute,
                        SubItems: SubItems,
                        BuyOrdSn: e.BuyOrdSn,
                    }
                    items.push(obj)
                } else {
                    filterItem[0].SubItems.push(e)
                }
            })
            this.listData = items
        },
    },
}
</script>
<style lang="scss" scoped>
.container {
    .item {
        padding: $app-page-padding $app-page-padding 0;
    }
    .bottom {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $uni-bg-color-grey;
        align-items: center;
        .num {
            display: flex;
            flex: 1;
            align-items: center;
        }
    }
    .order-detail-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 15rpx;
        }
        .product-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .product-name {
                font-weight: 500;
                font-size: $font-size-26;
                color: $app-color-text-main;
                margin-bottom: 6rpx;
                display: flex;
                justify-content: space-between;
            }
            .product-desc {
                font-size: $font-size-20;
                color: $app-color-text-tip;
                margin-bottom: 20rpx;
            }
            .product-bottom {
                display: flex;
                // flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .product-name {
                    product-num: $font-size-24;
                    color: $color-black;
                }
            }
            .product-price {
                font-size: $font-size-28;
                color: $color-orange-1;
            }
        }
    }
}
.order-item-box {
    margin: $app-page-padding;
    background: none;
}
.order-submit-list {
    border-radius: $border-radius-10;
    .policy-price-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        .label-text {
            flex: 1;
        }
    }
    .policy-after-price {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        align-items: center;
        justify-content: flex-end;
    }
}

.order-submit-item {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding-bottom: 14rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    .item-top {
        display: flex;
        flex-direction: row;

        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 20rpx;
        }

        .product-info {
            display: flex;
            flex-direction: column;
            flex: 1;

            .product-name {
                font-weight: 700;
                font-size: $font-size-28;
                color: $color-gray-1;
                flex: 1;
                display: flex;
                align-items: center;
                margin-bottom: 14rpx;
            }

            .policy-text {
                flex: 1;
                padding-right: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: normal;
                display: flex;
                color: #fa6400;
            }

            .arrow {
                border: solid #333333;
                border-width: 0 1px 1px 0;
                padding: 3px;
            }

            .arrow-down {
                margin-top: -4rpx;
            }

            .btn {
                flex-direction: row;
                font-size: $font-size-20;
                margin-left: 0;
            }
        }

        .btn-yellow-hollow {
            height: 48rpx;
            margin-bottom: 20rpx;
            width: auto;
            border-radius: 4rpx;
            border-color: rgba(0, 0, 0, 0);
            background: #ffffff;
            border: 1rpx solid #fa6400;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }

    .item-center {
        background: #f7f7f7;
        padding: 14rpx 24rpx;
        margin-top: 20rpx;

        .item-cell {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 8rpx;

            .label {
                display: flex;
                flex: 1;
                color: $app-color-text-tip;
            }

            .value {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .item-bottom {
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        background: $app-color-input-bg;

        input {
            font-size: $font-size-24;
            color: $app-color-text-tip;
        }
    }
    .pro-item {
        display: flex;
        flex-direction: row;

        .left {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-top: 4rpx;

            .label {
                font-size: 26rpx;
                color: $app-color-text-tip;
                padding: 6rpx 0;

                text {
                    font-size: 26rpx;
                }
                .specification {
                    font-size: 30rpx;
                    color: $color-gray-1;
                }
            }
            .price-bold {
                color: #000;
                font-size: 32rpx;
                font-weight: bold;
                padding-right: 14rpx;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .price-text {
                font-size: $font-size-28;
                color: $color-gray-1;
            }
        }
    }
}
.order-num {
    padding-bottom: 18rpx;
    margin-bottom: $app-page-padding;
    border-bottom: solid 1rpx $border;
    text {
        font-size: 28rpx;
    }
}
.checkMsg {
    margin-top: 16rpx;
    text {
        font-size: 28rpx;
        color: #f1270c;
    }
}
</style>
